<template>
  <div class="targetarea" :style="style">
    {{grid.program}}
  </div>
</template>

<script>
  export default {
    props: {
      mainHeight: Number,
      grid: {
        program: String,
        width: Number,
        height: Number,
        left: Number,
        top: Number
      }
    },
    computed: {
      style () {
        return {
          width: this.grid.width + 'vw',
          height: this.grid.height + 'vh',
          'margin-left': this.grid.left === 0 ? '' : this.grid.left + 'vw',
          'margin-top': this.grid.top === 0 ? '' : this.grid.top + 'vh',
          position: 'fixed'
        }
      }
    }
  }
</script>

<style>
  .targetarea {
    border: 1px solid black;
  }
</style>
